<template>
    <el-card>
        <template #header>


            <el-row>


                <el-col class="flexsc" :span="16">

                    <el-button @click='handleAddProduct' icon="plus" type="success">添加商品</el-button>

                </el-col>
                <el-col :span="8">

                    <el-input v-model="paginationParam.searchString" type="text" suffix-icon="search"
                        @keydown.enter="handleReturn" />

                </el-col>



            </el-row>

        </template>

        <template #default>

            <el-table :data="tableData" height='90%'>

                <el-table-column v-for="(field, index) in fieldList" :prop="field.prop" :label="field.label" :width="field.width"
                    :key="index" />

                <el-table-column label="Operations">
                    <template #default="scope">
                        <el-button icon="edit" type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">
                            编辑
                        </el-button>
                        <el-button icon="delete" size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>





        </template>
        <template #footer>




            <div style="padding: 10px 5px">

                <el-pagination background layout="sizes,prev, pager, next,total,jumper"
                    v-model:total="paginationParam.total" v-model:page-size="paginationParam.pageSize"
                    v-model:current-page="paginationParam.currentPage" :page-sizes="[2, 3, 4, 5, 10]" small
                    @size-change="handleSizeChange" @current-change="handleChange" />

            </div>




        </template>

    </el-card>

    <el-dialog v-model="isShow" width="30%" title="商品录入" draggable>

        <el-row>
            <el-col :offset="6" :span="12">
                <el-form :data="formData">

                    <el-form-item prop="num" label="编号:">
                        <el-input v-model="formData.num"></el-input>
                    </el-form-item>
                    <el-form-item prop="name" label="品名:">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                    <el-form-item prop="unit" label="单位:">
                        <el-input v-model="formData.unit"></el-input>
                    </el-form-item>
                    <el-form-item prop="price" label="单价:">
                        <el-input v-model="formData.price"></el-input>
                    </el-form-item>
                    <el-form-item prop="alias" label="别名:">
                        <el-input v-model="formData.alias"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-row justify="end" style="width: 100%;">

                            <el-button icon="document" type="primary" size="small" @click="handleDlgSave">保存</el-button>
                            <el-button icon="close" type="danger" size="small" @click="isShow = false">退出</el-button>
                        </el-row>
                    </el-form-item>

                </el-form>
            </el-col>
        </el-row>


    </el-dialog>

 <el-dialog v-model="isShow2" width="40%" title="商品编辑" draggable>

        <el-row>
            <el-col :offset="6" :span="12">
                <el-form :data="formData">

                    <el-form-item prop="num" label="编号:">
                        <el-input v-model="formData.num"></el-input>
                    </el-form-item>
                    <el-form-item prop="name" label="品名:">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                    <el-form-item prop="unit" label="单位:">
                        <el-input v-model="formData.unit"></el-input>
                    </el-form-item>
                    <el-form-item prop="price" label="单价:">
                        <el-input v-model="formData.price"></el-input>
                    </el-form-item>
                    <el-form-item prop="alias" label="别名:">
                        <el-input v-model="formData.alias"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-row justify="end" style="width: 100%;">

                            <el-button icon="document" type="primary" size="small" @click="handleDlgUpdate">保存</el-button>
                            <el-button icon="close" type="danger" size="small" @click="isShow2 = false">退出</el-button>
                        </el-row>
                    </el-form-item>

                </el-form>
            </el-col>
        </el-row>


    </el-dialog>

</template>

<script setup>

import { ElMessageBox } from 'element-plus'
import { ref, onMounted } from 'vue'
import {postRequest,server} from '../api/index'

const formData = ref({
    num: "",
    name: "",
    unit: "",
    price: "",
    alias: ""
})
const url = "http://yhdn.cn:5000"
const tableData = ref([])
const isShow = ref(false)
const isShow2 = ref(false)
const handleAddProduct = () => {

    //清空字段值
    clearData()
    isShow.value = true
}

const clearData = ()=>{
     //清空字段值
    for(let key in formData.value)
        formData.value[key] = ""
}

const fieldList = [
    {
        prop: "id",
        label: "ID",
        width: 80
    },
    {
        prop: "num",
        label: "Num",
        width: 100
    },
    {
        prop: "name",
        label: "Name",
        width: 300
    },
    {
        prop: "unit",
        label: "Unit",
        width: 100
    },
    {
        prop: "price",
        label: "Price",
        width: 100
    },
    {
        prop: "alias",
        label: "Alias",
        width: 200
    }
]

const paginationParam = ref({

    total: 100,
    currentPage: 1,
    pageSize: 5,
    searchString: ""


})

// 保存数据至数据库
const saveData = async () => {

    const _url = `${url}/saveall/yhdn/product`;
    const rows = [];
    const fields = ["num", "name", "unit", "price", "alias"]
    rows.push(formData.value)
    const jsonParam = {
        rows,
        fields
    }
    const response = await fetch(_url,
        {
            method: 'POST',
            headers: {
                'content-type': "application/json"
            },
            body: JSON.stringify(jsonParam)

        });


    const jsonData = await response.json();
    if (jsonData.code == "1")
    {
        ElMessageBox.alert("数据保存成功")
        clearData()

    }
    else
        ElMessageBox.alert(jsonData.message)
    

}

const fetchData = async () => {

    const _url = `${url}/pagination/yhdn/product`
    const response = await fetch(_url,
        {
            method: 'POST',
            headers: {
                'content-type': "application/json"
            },
            body: JSON.stringify(paginationParam.value)

        });
    const jsonData = await response.json();
    tableData.value = jsonData.rows
    paginationParam.value.total = jsonData.total


}



const handleChange = () => {

    const pageSize = paginationParam.value.pageSize
    const currentPage = paginationParam.value.currentPage
    fetchData()
}
const handleSizeChange = () => {

    //将当前页设置为第一页
     paginationParam.value.currentPage = 1
    handleChange()
}

const handleReturn = () => {

    //当前页设置为1
    paginationParam.value.currentPage =1
    fetchData()


}

const handleDlgUpdate = ()=>{


}

const handleEdit = (index,row)=>{

        isShow2.value = true
        formData.value = {...row}
}

onMounted(() => {


    fetchData()


})

function handleDlgSave() {


        saveData()
}


</script>

<style scoped>
.flexcc {
    display: flex;
    align-items: center;
    justify-content: center;

}

.flexce {
    display: flex;
    align-items: center;
    justify-content: flex-end;

}


.el-table {
    font-size: 12px;
}

/* 设置表头字体大小 */
.el-table th {
    font-size: 16px;
}

/* 设置表格内容字体大小 */
.el-table td {
    font-size: 12px;
}
</style>